<template>
  <div class="basemap">
    <div id="map" class="map"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
    // 调用创建控件事件
    this.createZoomControl();
    this.createAttribution();
    this.createScale();
  },
  methods: {
    initMap() {
      // 重庆市经纬度 107.820952,29.839539
      // const cqp = this.$L.latLng(29.5647398, 106.5478767);
      const cqp = this.$L.latLng(30.299539, 107.820952);

      this.map = this.$L
        .map("map", {
          // 版权控件
          attributionControl: false,
          // 缩放控件
          zoomControl: false,
        })
        .setView(cqp, 7);

      // 天地图token
      const tdtToken = "810e2cf8deac0489c6bb8ee29e5d9591";
      // 天地图 影像底图
      const wmtsImg =
        "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
        tdtToken;

      this.$L
        .tileLayer(wmtsImg, {
          maxZoom: 18,
        })
        .addTo(this.map);
    },
    // 缩放控件
    createZoomControl() {
      let zoomBtn = this.$L.control
        .zoom({
          position: "topright",
          zoomInTitle: "放大",
          zoomOutTitle: "缩小",
        })
        .addTo(this.map);
    },
    // 创建版权
    createAttribution() {
      let attribution = this.$L.control
        .attribution({
          position: "bottomright",
          prefix: "这是版权信息",
        })
        .addTo(this.map);
    },
    // 创建比例尺
    createScale() {
      let scale = this.$L.control
        .scale({
          position: "bottomright",
          maxWidth: 80,
          metric: true,
          imperial: false,
          updateWhenIdle: false,
        })
        .addTo(this.map);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>